P3:
👍

P3:
👍

P3:
👍

P3:
동일한 코드가 반복되는 것 같아서 아래처럼 하셔도 좋을 것 같습니다.

 const handleWindowResize = useCallback(() => {
    setMedia(checkMedia(window.innerWidth));
  }, []);

  useEffect(() => {
    handleWindowResize();

    window.addEventListener("resize", handleWindowResize);
    return () => {
      window.removeEventListener("resize", handleWindowResize);
    };
  }, [handleWindowResize]);

P2:
이렇게 받으셔야 하는 이유가 있을까요?
다른 props를 받는것도 아니라서 data이라는 객체를 받는것보다 각각의 값을 전달받는게 사용하기에 더 편할 것 같아서요~

부모 컴포넌트(BestItems)쪽에서 data.id, data.title, ... 이런식으로 뿌리는게 너무 길어져서 받은 data 그대로 전달했는데, 강사님 의견이 BestItem 입장에서 속성을 명시하는데에 더 정확하고 나은 것 같습니다!👍

P2:
처음 실행이 되었을때는 window innerWidth를 읽어와서 크기에 따른 값을 설정해주는 로직이 실행되지 않는다고 말씀해주셨습니다~
코드를 보니 default 값인 PC였다가 곧 window innerWidth에 맞는 값으로 변경이 되는데, 값이 변경된 후 다시 data fetching을 하지 않고 있습니다~

한번 확인해보시고 수정해보시면 좋을 것 같아요~

확인해보니까 생각보다 더 복잡한 것 같습니다.. ㅋㅋㅋㅠㅠ

1. 초기렌더링으로 인한 effect 실행
2. state 갱신으로 인한 effect 실행으로 인한 추가적인 state 갱신 & effect 실행

위 2개가 합쳐져서 데이터 패칭이 2~3번 발생하고,
이것이 비동기적이라 발생 순서에 따라 랜덤하게 초기데이터 or 갱신데이터가 보입니다😅
(React StrictMode는 next.config.js에서 false한 상태입니다.)

• 초기데이터로 끝난 경우
  
• 갱신데이터로 끝난 경우
  

P3:
type을 잘 정리해주신 것 좋습니다~
다만 API를 많이 연결하실수록 해당 파일이 커질가능성이 크니 추후에는 관련된 타입끼리 분리하셔도 좋을 것 같아요~